<template>
  <el-card>
    <template #header>
      <el-form inline>
        <el-form-item>
          <el-input placeholder="请输入分类名" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button @click="refresh" icon="Refresh">刷新</el-button>
          <el-button @click="getList" type="primary" icon="Search">搜索</el-button>
          <el-button @click="addShow = true" type="success" icon="plus">添加</el-button>
        </el-form-item>
      </el-form>
    </template>

    <el-table :data="list" border>
      <el-table-column type="index" label="#" width="80" align="center" />
      <el-table-column label="分类名">
        <template #default="{row}">
          <el-tag v-if="!row.isEdit">{{row.name}}</el-tag>
          <el-input placeholder="请输入分类名" v-model="row.name" v-else clearable/>
        </template>
      </el-table-column>
      <el-table-column label="图片">
        <template #default="{row}">
          <el-image style="width: 100px; height: 100px" :src="'/api' + row?.cover" v-if="!row.isEdit"/>
          <el-upload
              v-else
              class="avatar-uploader"
              action="/api/common/upload"
              :show-file-list="false"
              :on-success="uploadSuccess"
          >
            <el-image v-if="row?.cover" :src="'/api' + row?.cover" class="avatar"/>
            <el-icon v-else size="48" color="#d9d9d9">
              <Plus/>
            </el-icon>
            <el-icon v-if="row?.cover" class="avatar-delete" @click.stop="row.cover = ''">
              <Delete/>
            </el-icon>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="{row}">
          <el-button type="danger" text  @click="deleteHandel(row.id)">删除</el-button>
          <el-button type="primary" text v-if="!row.isEdit" @click="openEdit(row)">修改</el-button>
          <el-button type="success" text v-else @click="save(row, false)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 8px; display: flex; justify-content: flex-end">
      <el-pagination background layout="prev, pager, next, total" :total="total" @current-change="pageChange"/>
    </div>

    <el-dialog v-model="addShow" destroy-on-close>
      <el-form>
        <el-form-item label="分类名" label-width="150px">
           <el-input placeholder="请输入分类名" v-model="name"/>
        </el-form-item>
      </el-form>
      <el-form-item label="图片" label-width="150px">
        <el-upload
            class="avatar-uploader avatar-uploader2"
            action="/api/common/upload"
            :show-file-list="false"
            :on-success="uploadSuccess2"
        >
          <el-image v-if="cover" :src="'/api' + cover" class="avatar"/>
          <el-icon v-else size="48" color="#d9d9d9">
            <Plus/>
          </el-icon>
          <el-icon v-if="cover" class="avatar-delete" @click.stop="cover = ''">
            <Delete/>
          </el-icon>
        </el-upload>
      </el-form-item>

      <template #footer>
        <el-button @click="addShow = false">取消</el-button>
        <el-button @click="save({name}, true)" type="primary">提交</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>
<script setup>
import {updateAndAddTypeApi, typePages, deleteTypeApi} from '@/api/type.js'
import {ref, reactive} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import useMessage from "@/utils/useMessage.js";
import {Plus} from "@element-plus/icons-vue";

const addShow = ref(false);
const name = ref('')
const cover = ref('')

const query = reactive({
  page: 1,
  pageSize: 10,
  name: '',
})

const list = ref([])
const total = ref(0)
const getList = async () => {
  const res = await typePages(query)
  list.value = res.data.map(item => {
    return {
      ...item,
      isEdit: false
    }
  })
  total.value = res.total
}
getList()

const refresh = ()=> {
  query.page = 1
  query.name = ''
  list.value = []
  getList()
}
const currentRow = ref({})


const save = async (row, isReload) => {


  let res
  if(isReload){
    if(!name.value){
      ElMessage.error('请输入分类名!')
      return
    }
    if(!cover.value){
      ElMessage.error('请上传图片!')
      return
    }
    res = await updateAndAddTypeApi({
      cover: cover.value,
      name: name.value,
    })
    await getList()
  }else{
    if(!row.name){
      ElMessage.error('请输入分类名!')
      return
    }
    if(!row.cover){
      ElMessage.error('请上传图片!')
      return
    }
    res = await updateAndAddTypeApi(currentRow.value)
    refresh()
  }
  useMessage(res)

  currentRow.value = {}
  cover.value = ''
  name.value = ''

  addShow.value = false
}

const deleteHandel = async (id) => {
  await ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  const res = await deleteTypeApi(id)
  useMessage(res)
  await getList()
}


const pageChange = (page) => {
  query.page = page
  getList()
}

const openEdit = row => {
  row.isEdit = true
  currentRow.value = row
}
const uploadSuccess = async (res, row)=> {
    currentRow.value.cover = res.data.filePath
    row.cover = res.data.filePath
}
const uploadSuccess2 = async res => {
  cover.value = res.data.filePath
}


</script>
<style scoped lang="scss">
.avatar-uploader {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .avatar-delete {
    color: red;
    font-size: 22px;
    z-index: 999;
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
.avatar-uploader2{
  width: 200px;
  height: 200px;
}
</style>